<script type="text/javascript">
function user_conf($scope) {
	loadUsers(0);
	
	$scope.user={};
	
	$scope['removeUser'] = function(userid){
		$.getJSON('/user/delete/'+userid+'.do', function(data) {
			loadUsers(0);
		});
	}
	
	$scope['loadUsers'] = function(page){
		loadUsers(page)
	}
	
	$scope['saveUser'] = function(){
		$.getJSON('/user/add.do',$scope.user, function(data) {
			$('#add_user_panel').modal('hide');
			loadUsers(0);
		});
	}
	
	
	function loadUsers(page){
		$.getJSON('/user/page/'+page+'.do', function(data) {
			$scope.$apply(function() {
				$scope['page'] = data;
			});
		});
	}
}
</script>
<div style="width: 100%" ng-controller="user_conf">
	<button type="button" class="btn btn-primary" data-toggle="modal"
		data-target="#add_user_panel">添加用户</button>
	<table class="table table-condensed">
		<thead>
			<tr>
				<th>id</th>
				<th>name</th>
				<th>email</th>
				<th>requestCode</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="user in page.content">
				<td>{{user.id}}</td>
				<td>{{user.name}}</td>
				<td>{{user.email}}</td>
				<td>{{user.requestCode}}</td>
				<td><button class="btn btn-danger btn-sm"
						ng_click="removeUser(user.id)">删除</button></td>
			</tr>
		</tbody>
	</table>


	<ul class="pagination">
		<li ng-if="page.number-2>=0"><a
			ng_click="loadUsers(page.number-2)">{{page.number-2}}</a></li>
		<li ng-if="page.number-1>=0"><a
			ng_click="loadUsers(page.number-1)">{{page.number-1}}</a></li>
		<li class="active"><a>{{page.number}}</a></li>
		<li ng-if="page.number+1<page.totalPages"><a
			ng_click="loadUsers(page.number+1)">{{page.number+1}}</a></li>
		<li ng-if="page.number+2<page.totalPages"><a
			ng_click="loadUsers(page.number+2)">{{page.number+2}}</a></li>
	</ul>



	<div class="modal fade" id="add_user_panel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">添加用户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="a" class="col-sm-2 control-label">name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="a"
									placeholder="name" ng-model="user.name">
							</div>
						</div>
						<div class="form-group">
							<label for="b" class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="email" class="form-control" id="b"
									placeholder="email" ng-model="user.email">
							</div>
						</div>
						<div class="form-group">
							<label for="c" class="col-sm-2 control-label">requestCode</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="c"
									placeholder="requestCode" ng-model="user.requestCode">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" ng-click="saveUser()">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
</div>
